<template>
  <!-- :title="!id ? '新增角色' : childrenId == 'add' ? '新增下级' : '编辑角色'" -->
  <el-dialog
    :title="
      !id
        ? $t('role.role3')
        : childrenId == 'add'
        ? $t('dept.dept5')
        : $t('role.role4')
    "
    :visible.sync="dialogVisible"
    width="700px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 上级角色 -->
      <el-form-item :label="$t('role.role1')" prop="parent_id">
        <!--
        <el-cascader v-model="ruleForm.parent_id_list" :options="options" :show-all-levels="false" :props="propsList"  />-->
        <el-select
          v-model="ruleForm.parent_id"
          :placeholder="$t('common.common27') + $t('role.role1')"
          :disabled="disabled ? true : false"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.role_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 角色名称 -->
      <el-form-item :label="$t('role.role2')" prop="role_name">
        <el-input v-model="ruleForm.role_name" maxlength="10" show-word-limit />
      </el-form-item>
      <!-- 角色权限 -->
      <el-form-item :label="$t('role.role5')" prop="permissions">
        <el-tree
          ref="tree"
          :default-checked-keys="ruleForm.permissions"
          node-key="id"
          :data="treeData"
          :props="propsTree"
          @check="TreeClick"
          show-checkbox
        >
        </el-tree>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['roles@update']) && id) ||
        (checkPermission(['roles@save']) && !id) ||
        (checkPermission(['roles@save']) && childrenId == 'add')
      "
    >
      <el-button @click="resetForm('ruleForm')">{{
        $t("common.common1")
      }}</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">{{
        $t("common.common2")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getList, addList, editList, saveList } from "@/api/system/role";
import { MenuList } from "@/api/system/permissions";
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      id: "",
      treeData: [],
      options: [],
      ruleForm: {
        parent_id: 1,
        role_name: "",
        permissions: [],
        identify: "",
      },
      permissions_half: [],
      propsList: {
        value: "id",
        label: "role_name",
        checkStrictly: true,
      },
      propsTree: {
        label:
          this.$store.state.settings.langTail == "zh"
            ? "permission_name"
            : "permission_name_"+this.$store.state.settings.langTail,
        children: "children",
      },
      rules: {
        role_name: [
          {
            required: true,
            message: this.$t("common.common26") + this.$t("role.role2"),
            trigger: "blur",
          },
        ],
        permissions: [
          {
            required: true,
            message: this.$t("common.common27") + this.$t("role.role5"),
            trigger: "blur",
          },
        ],
      },
      childrenId: "",
      id: "",
    };
  },
  mounted() {},
  methods: {
    TreeClick(data, node) {
      this.ruleForm.permissions = node.checkedKeys;
      this.permissions_half = node.halfCheckedKeys;
    },
    init(id, childrenId) {
      this.id = id;
      this.childrenId = childrenId;
      this.getList(id, { add_lower: 1 });
      this.dialogVisible = true;
      this.MenuList();
      this.disabled = false;
      if (id) {
        // 新增 添加下级
        this.disabled = true;
        this.ruleForm.parent_id = Number(id);
      }
    },
    EditInit(id) {
      this.childrenId = "";
      this.getList(id);
      this.disabled = true;
      this.dialogVisible = true;
      this.editList(id);
      this.MenuList();
      this.id = id;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.permissions.length == 0) {
            // 请勾选角色权限
            this.$message({
              showClose: true,
              message: this.$t("role.role6"),
              type: "warning",
            });
            return false;
          }
          var obj = Object.assign({}, this.ruleForm, {
            identify: this.ruleForm.role_name,
            permissions_half: this.permissions_half,
          });
          if (this.childrenId == "add") {
            this.addItem(obj);
          } else {
            this.saveList(obj);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.tree.setCheckedKeys([]);
      this.dialogVisible = false;
    },
    handleClose() {
      this.resetForm("ruleForm");
    },
    getList(id, obj) {
      obj = obj || {};
      getList(Object.assign({}, { search_type: 2, id: id }, obj)).then(
        (res) => {
          this.options = res.data;
        }
      );
    },
    // 详情
    editList(id) {
      editList(id).then((res) => {
        this.ruleForm = {
          parent_id: res.data.parent_id,
          role_name: res.data.role_name,
          description: res.data.description,
          permissions: res.data.permissions_json.map(Number),
        };
        // this.$refs.tree.setCheckedKeys(res.data.permissions_json);

        this.$nextTick(() => {
          // this.ruleForm.permissions = this.$refs.tree.getCheckedKeys();
          this.permissions_half = this.$refs.tree.getHalfCheckedKeys();
        });
      });
    },
    // 新增
    addItem(obj) {
      addList(obj).then((res) => {
        if (res.code == 10000) {
          this.$parent.getList();
          this.resetForm("ruleForm");
        }
      });
    },
    saveList(obj) {
      saveList(this.id, obj).then((res) => {
        if (res.code == 10000) {
          this.$parent.getList();
          this.resetForm("ruleForm");
        }
      });
    },
    // 菜单列表
    MenuList() {
      MenuList().then((res) => {
        this.treeData = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  line-height: 40px;
}
</style>
